﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog" append-to-body
  :close-on-click-modal = 'false' :close-on-press-escape = 'false'>
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules'>
      <!-- 更新当前节点时需要设置的参数（只有当前节点的参数） -->
      <el-form-item label = "当前节点主题：" prop = 'Title'>
        <el-input v-model = 'ruleForm.Title' placeholder = "请输入当前节点主题，常量请用 @常量名表示"></el-input>
      </el-form-item>
      <el-form-item label = "当前节点类别：" prop = 'Category'>
        <el-input v-model = 'ruleForm.Category' placeholder = "请输入当前节点类别，常量请用 @常量名表示"></el-input>
      </el-form-item>
      <el-form-item label = "当前节点状态：" prop = 'Status'>
        <el-select v-model = 'ruleForm.Status' placeholder = "请选择当前节点状态">
          <el-option label = '待办' value = '@待办'></el-option>
          <el-option label = '已办' value = '@已办'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label = "当前节点扩展字段：" prop = 'Extend'>
        <el-input v-model = 'ruleForm.Extend' placeholder = "请输入当前节点扩展字段，常量请用 @常量名表示" type = 'textarea' autosize></el-input>
      </el-form-item>
      <!-- 新建下一节点需要设置的参数(包括所有) -->
      <el-form-item label = "下一节点主题：" prop = 'NextTitle' v-if = "nodeJsonInfo && nodeJsonInfo.workflowEventType === 'addNode'">
        <el-input v-model = 'ruleForm.NextTitle' placeholder = "请输入下一节点主题，常量请用 @常量名表示"></el-input>
      </el-form-item>
      <el-form-item label = "下一节点类别：" prop = 'NextCategory' v-if = "nodeJsonInfo && nodeJsonInfo.workflowEventType === 'addNode'">
        <el-input v-model = 'ruleForm.NextCategory' placeholder = "请输入下一节点类别，常量请用 @常量名表示"></el-input>
      </el-form-item>
      <el-form-item label = "下一节点状态：" prop = 'NextStatus' v-if = "nodeJsonInfo && nodeJsonInfo.workflowEventType === 'addNode'">
        <el-select v-model = 'ruleForm.NextStatus' placeholder = "请选择下一节点状态">
          <el-option label = '待办' value = '@待办'></el-option>
          <el-option label = '已办' value = '@已办'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label = "下一节点扩展字段：" prop = 'NextExtend' v-if = "nodeJsonInfo && nodeJsonInfo.workflowEventType === 'addNode'">
        <el-input v-model = 'ruleForm.NextExtend' placeholder = "请输入下一节点扩展字段，常量请用 @常量名表示" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item label = "是否会签：" prop = 'IsCountersign' v-if = "nodeJsonInfo && nodeJsonInfo.workflowEventType === 'addNode'">
        <el-select v-model = 'ruleForm.IsCountersign' placeholder = "请选择当前节点状态">
          <el-option label = '会签' value = '@1'></el-option>
          <el-option label = '非会签' value = '@2'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['nodeJsonDialog', 'nodeJsonInfo'],
  data () {
    return {
      dialogTitle: '事件参数设定',
      dialogFormVisible: false,
      labelWidth: '132px',
      ruleForm: {
        Title: '',
        Category: '',
        Status: '',
        Extend: '',
        NextTitle: '',
        NextCategory: '',
        NextStatus: '',
        NextExtend: '',
        IsCountersign: ''
      },
      rules: {
        Title: [
          {required: true, message: '当前节点主题不能为空', trigger: 'blur'}
        ],
        Category: [
          {required: true, message: '当前节点类别不能为空', trigger: 'blur'}
        ],
        Status: [
          {required: true, message: '当前节点状态不能为空', trigger: 'change'}
        ],
        NextTitle: [
          {required: true, message: '下一节点主题不能为空', trigger: 'blur'}
        ],
        NextCategory: [
          {required: true, message: '下一节点类别不能为空', trigger: 'blur'}
        ],
        NextStatus: [
          {required: true, message: '下一节点状态不能为空', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    initPage () {
      if (this.nodeJsonInfo.nodeJson) {
        let jsonObj = JSON.parse(this.nodeJsonInfo.nodeJson)
        this.ruleForm.Title = jsonObj.Title ? jsonObj.Title : ''
        this.ruleForm.Category = jsonObj.Category ? jsonObj.Category : ''
        this.ruleForm.Status = jsonObj.Status ? jsonObj.Status : ''
        this.ruleForm.Extend = jsonObj.Extend ? jsonObj.Extend : ''
        this.ruleForm.NextTitle = jsonObj.NextTitle ? jsonObj.NextTitle : ''
        this.ruleForm.NextCategory = jsonObj.NextCategory ? jsonObj.NextCategory : ''
        this.ruleForm.NextStatus = jsonObj.NextStatus ? jsonObj.NextStatus : ''
        this.ruleForm.NextExtend = jsonObj.NextExtend ? jsonObj.NextExtend : ''
        this.ruleForm.IsCountersign = jsonObj.IsCountersign ? jsonObj.IsCountersign : ''
      } else {
        this.ruleForm.Title = ''
        this.ruleForm.Category = ''
        this.ruleForm.Status = ''
        this.ruleForm.Extend = ''
        this.ruleForm.NextTitle = ''
        this.ruleForm.NextCategory = ''
        this.ruleForm.NextStatus = ''
        this.ruleForm.NextExtend = ''
        this.ruleForm.IsCountersign = ''
      }
    },
    // 点击弹窗的确定按钮
    submitForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          let nodeJsonString = ''
          if (this.nodeJsonInfo.workflowEventType === 'addNode') {
            let nodeJsonObj = {
              Title: this.ruleForm.Title,
              Category: this.ruleForm.Category,
              Status: this.ruleForm.Status,
              Extend: this.ruleForm.Extend,
              NextTitle: this.ruleForm.NextTitle,
              NextCategory: this.ruleForm.NextCategory,
              NextStatus: this.ruleForm.NextStatus,
              NextExtend: this.ruleForm.NextExtend,
              IsCountersign: this.ruleForm.IsCountersign
            }
            nodeJsonString = JSON.stringify(nodeJsonObj)
          } else if (this.nodeJsonInfo.workflowEventType === 'updateNode') {
            let nodeJsonObj = {
              Title: this.ruleForm.Title,
              Category: this.ruleForm.Category,
              Status: this.ruleForm.Status,
              Extend: this.ruleForm.Extend
            }
            nodeJsonString = JSON.stringify(nodeJsonObj)
          }
          this.$emit('setNodeJsonSuccess', nodeJsonString)
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('setNodeJsonfailed')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('setNodeJsonfailed')
    }
  },
  watch: {
    // 监听弹窗打开的方法
    nodeJsonDialog: {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>
